<template>
  <div id="app">

    <el-row>
      <el-col :span="18">

          <el-row>
            <el-col :span="24">
                <el-input
                    placeholder="内容链接"
                    v-model="url"
                    clearable>

                    <el-select v-model="select" slot="prepend" placeholder="请选择平台">
                      <el-option label="微信" value="微信"></el-option>
                      <el-option label="今日头条" value="今日头条"></el-option>
                    </el-select>

                  <el-button slot="append" icon="el-icon-search" type="danger" @click="newWindow">采集</el-button>


                </el-input>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-input
                  type="textarea"
                  readonly:true
                  disabled="disabled"
                  :rows="10"
                  placeholder=""
                  resize="none"
                  v-model="log">
              </el-input>
            </el-col>
          </el-row>
        <p style="text-align: left;font-size: 14px;">下载路径：{{saveDir}}</p>

        <el-row>
          <el-col :span="6" class="option-button"><el-button type="primary" @click="chooseDir">设置路径</el-button></el-col>
          <el-col :span="6" class="option-button"><el-button type="primary" @click="openFolder">打开文件</el-button></el-col>
          <el-col :span="6" class="option-button"><el-button type="primary" @click="clearScreen">清空日志</el-button></el-col>
<!--          <el-col :span="6" class="option-button"><el-button type="primary" @click="newWindow">新页面</el-button></el-col>-->
        </el-row>

      </el-col>
<!--      <el-col :span="6"><div class="grid-content bg-purple"></div>右边广告</el-col>-->
    </el-row>

  </div>
</template>

<script>

export default {
  name: 'App',
  data: function() {
    return {
      select: "",//所选平台
      url: '',//链接
      log: '',//日志
      saveDir: ''
    }
  },
  created() {
    this.$http
        .get('http://localhost:6789/getDir')
        .then(response =>
        {
          console.log(response.data)
          this.saveDir = response.data
        })
        .catch(function(error)
        {
          console.log(error)
        });
  },
  methods: {
    //解析
    extract(){
      if(!this.saveDir){
        this.$message.error('错误：请「设置路径」');
        return
      }
      if(!this.url){
        this.$message.error('错误：请输入「内容链接」');
        return
      }
      if(!this.select){
        this.$message.error('错误：请选择「平台」');
        return
      }

      this.$http
          .get('http://localhost:6789/extract?url='+this.url)
          .then(response =>
          {
            console.log(response)
            this.log += "\r\n" + response.data
          })
          .catch(function(error)
          {
            console.log(error)
          });
    },
    //设置保存路径
    chooseDir(){
      this.$http
          .get('http://localhost:6789/chooseDir')
          .then(response =>
          {
            console.log(response)
            this.getDir()
          })
          .catch(function(error)
          {
            console.log(error)
          });
    },
    getDir(){
      this.$http
          .get('http://localhost:6789/getDir')
          .then(response =>
          {
            console.log(response.data)
            this.saveDir = response.data
          })
          .catch(function(error)
          {
            console.log(error)
          });

    },
    openFolder(){
      this.$http
          .get('http://localhost:6789/openFolder')
    },
    clearScreen(){
      this.log = ""
    },
    newWindow(){
      if(!this.saveDir){
        this.$message.error('错误：请「设置路径」');
        return
      }
      if(!this.url){
        this.$message.error('错误：请输入「内容链接」');
        return
      }
      if(!this.select){
        this.$message.error('错误：请选择「平台」');
        return
      }

      this.$http
          .get('http://localhost:6789/newWindow?url='+this.url)

      this.log += "\r\n" + "[INFO]采集成功"
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.el-row {
  margin-bottom: 10px;
  &:last-child {
     margin-bottom: 0;
   }
}

.el-select .el-input {
  width: 130px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.option-button {
  text-align: left;
}
</style>
